<script setup>

</script>


<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="product-card">
              <el-image class="product-picture" src="http://127.0.0.1:8081"></el-image>
              <div class="info">

                <div>
                  <el-text type="info" truncated>
                    黑标高端水果，海南火山岩荔枝王
                  </el-text>
                </div>
                <div>
                  <el-text type="info" truncated>
                    严选黑标高端水果系列。寻味原产地，奢品佳果，限量供应
                  </el-text>
                </div>
                <div>
                  <el-space size="small">
                    <el-text type="danger">¥138</el-text>
                    <el-text type="info" size="small" tag="del">>¥228</el-text>
                  </el-space>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>

      </el-footer>
    </el-container>
  </div>
</template>


<style scoped>
.common-layout {
  width: 1000px;
  margin: auto;
  background: #fefefe;
}
.product-card{
  margin-bottom: 20px;
}
.info{
  text-align: center;
}
.product-card:hover{
  cursor: pointer;
  background: bisque;
}
.el-col{
  background: orange;
}

</style>
